<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout/blank"><!-- layout文件路径-->
<head>
    <title>订单列表</title>
</head>
<body>
<div layout:fragment="content">
    <div class="card">
        <div class="card-body">
            <table id="grid-table"></table>
            <div id="grid-pager"></div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var query_url = "/order/query.do";
    $(document).ready(function () {
        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 0);
            }
        });


        $(document).on('click', 'th input:checkbox', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });
        });

        $(grid_selector).jqGrid({
            url: query_url,
            datatype: "json",
            mtype: 'post',
            height: '100%',
            colNames: ['id', '订单编号', '域名', '状态', '电影','用户'],
            colModel: [{
                name: 'id',
                index: 'id',
                key: true,
                editable: false,
                hidden: true
            }, {
                name: 'code',
                index: 'code',
                align: 'center',
                editable: true
            }, {
                name: 'site_name',
                index: 'site_name',
                align: 'center',
                editable: true
            }, {
                name: 'status',
                index: 'status',
                align: 'center',
                edittype:"select",
                editable: true,
                editoptions:{value:{'00':'待支付', '01':'已支付', '02':'已取消'}}
            },
            {
                name: 'movie_name',
                index: 'movie_name',
                fixed: true,
                search: false,
                sortable: false,
                resize: false,
                align: 'center'
            }, {
                name: 'username',
                index: 'username',
                fixed: true,
                search: false,
                sortable: false,
                resize: false,
                align: 'center',
            }],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: pager_selector,
            altRows: true,
            gridview: true,
            multiselect: true,
            pgbuttons:true,
            multiboxonly: true,
            loadComplete: function () {
                $(grid_selector).closest(".ui-jqgrid-bdiv").css({'overflow-x': 'hidden'});
            },
            caption: "订单列表",
            autowidth: true

        });
        $(window).triggerHandler('resize.jqGrid'); // trigger window resize

    });
</script>